<template>
	<div>
		 <!-- 顶部导航 -->
    <!-- <div class="top_tab">
      <span>党务公开</span>
    </div> -->
     <!-- 空DIV -->
    <!-- <div class="hight-r"></div> -->
		<div class="center">
			<div class="title">
				<span>{{infos.title}}</span>
			</div>
			<div class="infos">
				<span class="time">{{(infos.start_time) | time}}</span>
			</div>
			<p v-html="infos.content"></p>
			<div class="pic">
				<!-- <div :key="index" class="gf">
					<img :src="item.picture">
				</div> -->
			</div>
		</div>
		<div class="fj" v-if="infos.accessoryName!=''">
			<div class="box">
				<span class="title">附件</span>
				<div class="bar">
					<img src="@as/img/dangwu_wode_fj@2x.png" alt="">
					<div class="fjname">
						<a :href="infos.accessory">{{infos.accessoryName}}</a>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
			data() {
				return {
					eid:'',
					infos:{},
				}
			},
			mounted() {

			},
			methods: {
				async getinfo () {  
					let that = this;
					try {
						let params = {
							id:that.eid,
						}
						const url = `/app/workplan/info`
						let res = await that.$http.get(url, params) 
						that.$progress.done()
						if (res.code === 200) {
							that.infos = res.data
						}
					} catch (e) {
						console.log('​catch -> e', e)
					}
				},
			},
			created(){
				this.eid = this.$route.query.id;
				this.getinfo()
			}
	}
</script>

<style scoped lang="scss">
/* 顶部tab */
.top_tab {
  width:100%;
	height:50px;
  padding:0 15px;
  background: #FFF;
  display: flex;
	position: fixed;
  justify-content: center;
  align-items: center;
	z-index: 20;
	span {
		color: #333;
		font-size: 18px;
		font-weight: bold;
	}
}
/* 顶部空 */
.hight-r {
  height: 50px;
}
.center{
	width:100%;
	padding: 0 15px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	.title{
		width:100%;
		// margin-top: 15px;
		span{
			font-size: 18px;
			color: #333;
			display: inline-block;
			line-height: 1.5;
			font-weight: bold;
		}
	}
	.infos{
		width:100%;
		display: flex;
		justify-content: space-between;
		margin-top: 5px;
		margin-bottom: 5px;
		.zz{
			font-size: 12px;
			color: #ec5345;
		}
		.time{
			font-size: 12px;
			color: #999;
		}
	}
	p{
		font-size: 14px;
		color: #666;
		text-indent: 2em;
		line-height: 1.8;
		margin-top: 10px;
		margin-bottom: 10px;
	}
	.pic{
		width:100%;
		display: flex;
		flex-wrap: wrap;
		.gf{
			width:31%;
			height:71.5px;
			overflow: hidden;
			margin-right: 12px;
			margin-bottom: 8px;
			
			img{
				width:100%;
				height:100%;
				border-radius: 5px;
			}
		}
	}
}
.gf:nth-child(3n){
	margin-right: 0 !important;
}
.fj{
	width:100%;
	padding: 15px 15px 0 15px;
	box-sizing: border-box;
	.box{
		width:100%;
		padding: 20px 0;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		.title{
			font-size: 16px;
			color: #333;
			font-weight: bold;
		}
		.bar{
			width:100%;
			display: flex;
			align-items: center;
			// margin-top: 10px;
			img{
				width:17px;  
				height:16.5px; 
			}
			.fjname{
				width:95%;
				overflow: hidden;
				text-overflow:ellipsis;
				white-space: nowrap;
				padding: 0 0 0 5px;
				a{
					text-decoration:none; 
					font-size: 14px;
					color: #666 !important;
					margin-left: 5px;
					display: inline-block;
					line-height: 1.2;
					overflow: hidden;
					margin: 0;
					padding: 0;
					text-overflow:ellipsis;
					white-space: nowrap;
				}
			}
		}
	}
}
.md{
	width:100%;
	padding: 15px 15px;
	.title{
		width:100%;
		display: flex;
		justify-content: space-between;
		.txt{
			font-size: 16px;
			color: #333;
			font-weight: bold;
		}
		.zk{
			display: flex;
			align-items: center;
			span{
				font-size: 12px;
				color: #999;
			}
			img{
				width:10px;
				height:8.5px;
				margin-left: 3px;
			}
		}
	}
	.name{
		width:100%;
		display: flex;
		p{
			font-size: 12px;
			color: #666;
			line-height: 2;
			margin-left: 5px;
		}
	}
}
</style>